<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8"></meta>
	<link rel="stylesheet"
		  th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
	<link rel="stylesheet"
		  th:href="@{webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}" />
	<script type="text/javascript"
			th:src="@{webjars/jquery/1.11.1/jquery.min.js}"></script>
	<script type="text/javascript"
			th:src="@{webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
	<title>网站首页</title>
</head>
<body>
<div class="panel panel-primary">
	<!-- .panel-heading 面板头信息。 -->
	<div class="panel-heading">
		<!-- .panel-title 面板标题。 -->
		<h3 class="panel-title">第一个Spring Boot Web开发示例</h3>
	</div>
</div>
<br />
<div class="container">
	<div class="panel panel-primary">
		<!-- .panel-heading 面板头信息。 -->
		<div class="panel-heading">
			<!-- .panel-title 面板标题。 -->
			<h3 class="panel-title">图书信息列表</h3>
		</div>
		<div class="panel-body">
			<div class="container">
				<div class="row">
					<div class="col-md-4 col-sm-6" th:each="book:${books}">
						<!-- 注意这个图片地址的写法 -->
						<a href="">
							<!-- 只显示图片 -->
							<!-- <img
									th:src="@{'img/'+${book.bookImg} }" src="img/java.png"
									alt="图书封面" width="100px" height="138px" /> -->

							<!-- 判断图片是否为空，如果为空，就显示占位图 -->
							<img
									th:src="@{${book.bookImg} ==null?'img/java.png': 'img/'+${book.bookImg} }"
									src="img/java.png" alt="图书封面" width="100px" height="138px" />

						</a>
						<div class="captio">
							<h4 th:text="${book.bookName}">疯狂Java讲义</h4>
							<p th:text="${book.author}">李刚</p>
							<p th:text="${book.publisher}">电子工业出版社</p>
							<p th:text="${book.price}">109.00</p>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>
</body>
